<?php $this->template->add_admin_css_lib(admin_theme_url().'vendor/fancybox/jquery.fancybox.css'); ?>
<?php $this->template->add_admin_css_lib(admin_theme_url().'vendor/fancybox/helpers/jquery.fancybox-buttons.css'); ?>
<?php $this->template->add_admin_js_lib(admin_theme_url().'vendor/fancybox/jquery.mousewheel-3.0.6.pack.js'); ?>
<?php $this->template->add_admin_js_lib(admin_theme_url().'vendor/fancybox/jquery.fancybox.pack.js'); ?>
<?php $this->template->add_admin_js_lib(admin_theme_url().'vendor/fancybox/helpers/jquery.fancybox-buttons.js'); ?>
<?php $this->template->add_admin_js_lib(admin_theme_url().'vendor/fancybox/helpers/jquery.fancybox-media.js'); ?>
<?php $this->load->view($this->template->tpl_prefix_admin.'include/header');?>

<style>
body{
background: #fff;
}
</style>
<!-- START Main section-->
<section>
    <!-- START Page content-->
    <div class="content-wrapper">
        <div class="btn-group pull-right">
            <input id="fieldID2" type="hidden" value="" >
            <a href="<?php echo base_url();?>media/filemanager/dialog.php?type=2&field_id=fieldID2" class="btn btn-default btn-sm iframe-btn" type="button">Upload</a>
        </div>
        <h3>Tin Ảnh
        <small>Tin ảnh, bạn có thể kéo thả để sắp xếp các vị trí của ảnh.</small>
        </h3>

        <style>
        #sortable { list-style-type: none; margin: 0; padding: 0; }
        #sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 160px; height: 145px; font-size: 4em; text-align: center; }
        #sortable li img {width: 160px; height: 120px;cursor: move;}
        </style>
        <script>
        $(function() {
        // $( "#sortable" ).sortable();
        // $( "#sortable" ).disableSelection();
        });
        </script>
        <!-- START row-->
        <ul id="sortable" >
            <?php for($i=0; $i<20; $i++) { ?>
            <li class="ui-state-default panel" id="https://hstatic.net/603/1000004603/1/2015/1-2/lighthouse_compact.jpg"><img src="https://hstatic.net/603/1000004603/1/2015/1-2/lighthouse_compact.jpg">
                <a href="#" class="btn btn-square btn-primary"><i class="fa fa-trash-o"></i></a>
            </li>
            <?php } ?>
        </ul>
        <!-- END row-->
    </div>
    <!-- END Page content-->
</section>
<script type="text/javascript">
(function($, window, document){
'use strict';
// Component is optional
// if(!$.fn.sortable) return;
var Selector = '#sortable',
    storageKeyName = 'portletState2';
$(function(){
    $( Selector ).sortable({
        // connectWith:          Selector,
        items:                'li.panel',
        // handle:               '.portlet-handler',
        opacity:              0.7,
        placeholder:          'portlet box-placeholder',
        cancel:               '.portlet-cancel',
    	forcePlaceholderSize: true,
        iframeFix:            false,
        tolerance:            'pointer',
        helper:               'original',
        revert:               200,
        forceHelperSize:      true,
        start:                saveListSize,
        update:               savePortletOrder,
        create:               loadPortletOrder
    })
    // optionally disables mouse selection
    //.disableSelection()
    ;
});
function savePortletOrder(event, ui) {
    
    var data = store.get(storageKeyName);
    
    if(!data) { data = {}; }
    data[this.id] = $(this).sortable('toArray');
    if(data) {
    store.set(storageKeyName, data);
    }
    console.log(data);
    $.ajax({
		type : "POST",
		url : "<?php echo $this->url_index;?>/popup_post_images/<?php echo $edit_id;?>",
		data : "images=" + $(this).sortable("toArray"),
		success : function (data) {
		// alert('Cập nhật vị trí thành công.');
		}
	});
	// console.log(data);
	// save portlet size to avoid jumps
	saveListSize.apply(this);
}

function loadPortletOrder() {

	var data = store.get(storageKeyName);
	if(data) {

		var porletId = this.id,
		panels   = data[porletId];
		if(panels) {
			var portlet = $('#'+porletId);

			$.each(panels, function(index, value) {
				$('#'+value).appendTo(portlet);
			});
		}
	}

	// save portlet size to avoid jumps
	saveListSize.apply(this);
}

// Keeps a consistent size in all portlet lists
function saveListSize() {
	var $this = $(this);
	$this.css('min-height', $this.height());
}

/*function resetListSize() {
$(this).css('min-height', "");
}*/
}(jQuery, window, document));

$('.iframe-btn').fancybox({
	'width'	: 880,
	'height'	: 570,
	'type'	: 'iframe',
	'autoScale'   : false
});


//
// Handles message from ResponsiveFilemanager
//
function OnMessage(e){
	var event = e.originalEvent;
	// Make sure the sender of the event is trusted
	if(event.data.sender === 'responsivefilemanager'){
		if(event.data.field_id){
			var fieldID=event.data.field_id;
			var url=event.data.url;
			$('#'+fieldID).val(url).trigger('change');
			$.fancybox.close();
			// Delete handler of the message from ResponsiveFilemanager
			$(window).off('message', OnMessage);
		}
	}
}

// Handler for a message from ResponsiveFilemanager
$('.iframe-btn').on('click',function(){
	$(window).on('message', OnMessage);
});
function responsive_filemanager_callback(field_id){
	console.log(field_id);
	var url=jQuery('#'+field_id).val();
	// alert('update '+field_id+" with "+url);
	html = '<li class="ui-state-default panel" id="images_666"><img src="'+url+'"></li>';
	$("#sortable").append(html);
	//your code
}
</script>
<?php $this->load->view($this->template->tpl_prefix_admin.'include/footer');?>